<template>
  <view>
    <view class="had" v-if="goods_list.length">
      <view
        class="list_wrapper"
        v-for="(item,index) in goods_list"
        :key="item.goods_id"
      >
     
        <view class="select"  @tap="selectStatic(index)">
          <view
            v-if="item.goods_selected"
            class="iconfont icon-xuanzhong"
          ></view>
          <view v-else class="iconfont icon-xuanze"></view>
        </view>
        <view class="content">
          <Goods :goodsInfo="item"> </Goods>
          <view class="conut">
            <view class="reduce iconfont icon-jianshao" @tap="reduceNum(index)"></view>
            <text class="number"> {{ goods_list[index].goods_count }}</text>
            <view class="add iconfont icon-zengjia" @tap="addNum(index)"> </view>
          </view>
        </view>
      </view>

      <view class="account">
        <view class="select" >
          <view @tap="allSelect()" v-if="allselect" class="iconfont icon-xuanzhong"></view>
          <view  @tap="allSelect()" v-else class="iconfont icon-xuanze"></view>
          全选
        </view>

        <text class="sum">合计：</text>
        <text class="price">{{ account }}</text>

        <text class="topay" @tap="toPay">去结算({{ goods_num }})</text>
      </view>
    </view>

    <view v-else class="empty"> <image src="@/static/cart.png" /> </view>
  </view>
</template>

<script>
import Goods from "@/components/goods/index";
export default {
  components: {
    Goods,
  },
  data() {
    return {
      goods_list: [],
      allselect: true,
      goods_num:0
    };
  },
  computed:{
    account(){
      let sum = 0
      let index = 0
       const res=  this.goods_list.findIndex(item => item.goods_selected)
      this.goods_list.forEach(item =>{
        if(item.goods_selected){
         sum += item.goods_price * item.goods_count
         index ++
        }
      })
      this.goods_num =index
      return sum
    }
  },
  watch:{
    goods_list:{
      deep:true,
      handler:(val) =>{
        uni.setStorageSync('cartList', val)
      }
    }
  
  },
  onShow(){
    this.goods_list = uni.getStorageSync("cartList");
    console.log(this.goods_list);
     this.radioStatus()
  },
  methods: {
    toPay(){
      if(this.goods_num === 0){
        uni.showToast({
          title: '请选择商品',
          icon:'none',
          duration: 2000
        });
      }else{
        uni.navigateTo({
           url: '/pages/pay/main'
        });
      }
    },
    allSelect(){
       this.allselect =!this.allselect
      this.goods_list.forEach(item =>{
            item.goods_selected =this.allselect
          })
    },
    selectStatic(index){
      this.goods_list[index].goods_selected = !this.goods_list[index].goods_selected   
      this.radioStatus()
    },
    radioStatus(){
       const res = this.goods_list.every(item=>item.goods_selected === true)
      this.allselect =res
    },
    reduceNum(id){
     
       this.goods_list[id].goods_count --
        if( this.goods_list[id].goods_count  === 0){

            uni.showModal({
              confirmColor:"#ccc",
              confirmText:"del",
              content: '是否取消该商品',
              success :(res)=> {
                if (res.confirm) {
                  this.goods_list.splice(id,1)
                } else if (res.cancel) {
                  console.log('用户点击取消');
                  this.goods_list[id].goods_count ++
                }
              }
            });

        }
    },
    addNum(id){
      this.goods_list[id].goods_count ++
    }
  },
};
</script>

<style lang="less" scoped>
.had{
  padding-bottom: 100rpx;
}
.list_wrapper {
  padding-left: 20rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e2e2e2;
  .select {
    display: flex;
    align-items: center;
   
    justify-content: center;
    .iconfont {
      font-size: 25px;
      color: #e03440;
    }
  }
  .content {
    position: relative;
    width: 680rpx;
    .conut {
      padding: 0 20rpx;
      position: absolute;
      right: 0;
      width: 320rpx;

      bottom: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.account {
  height: 88rpx;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  border-top: 2px solid #e2e2e2;
  background-color: #fff;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  // border-top: #e2e2e2;
  .select {
    display: flex;
    font-size: 30rpx;
    .icon-xuanzhong {
      color: #e03440;
    }
  }
  .sum {
    margin-left: 60rpx;
    font-size: 30rpx;
    color: #ccc;
  }
  .price {
    min-width: 200rpx;
    font-weight: 700;
    background-color: #fff;
  }
  .topay {
    margin-left: 100rpx;
    font-size: 30rpx;
    color: #fff;
    width: 20%;
    height: 52rpx;
    background-color: var(--themeColor);
    font-size: 30rpx;
    line-height: 52rpx;
    border-radius: 26rpx;
    text-align: center;
  }
}
</style>